<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('配置接口实现自动请求数据并渲染树节点')}`">{{ $t('配置接口实现自动请求数据并渲染树节点') }}</t>
            <li>
                传入<span class="d-code">request-config</span>接口请求的配置对象，即可实现自动发起请求获取树数据并渲染树节点
            </li>
            <li>
                如需实现远程搜索，可以参照<span class="s-code">【Tree】组件</span>的示例来配置
            </li>
            <li>当前已选择：<span class="s-code-gray">{{ selections.map(({ name }) => name).join('、') || '--' }}</span></li>
        </template>
        <el-button type="primary" @click="visible = true">点击打开树选择器</el-button>

        <sib-tree-picker
            v-model="visible"
            filterable
            :request-config="requestConfig"
            @confirm="confirm">
        </sib-tree-picker>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const visible = ref(false);
        const selections = ref([]);

        return {
            visible,
            selections,
            requestConfig: {
                url: '/api/tree-data.json',
                method: 'get',
                params: {},
            },
            confirm(rows) {
                selections.value = rows;
            },
            templateString: `<template>
    <div class="example-box">
        <li>当前已选择：<span class="s-code-gray">{{ selections.map(({ name }) => name).join('、') || '--' }}</span></li>
        <el-button type="primary" @click="visible = true">点击打开树选择器</el-button>

        <sib-tree-picker
            v-model="visible"
            filterable
            :request-config="requestConfig"
            @confirm="confirm">
        </sib-tree-picker>
    </div>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const visible = ref(false);
        const selections = ref([]);

        return {
            visible,
            selections,
            requestConfig: {
                url: '/api/tree-data.json',
                method: 'get',
                params: {},
            },
            confirm(rows) {
                selections.value = rows;
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
